.app-visual-stepper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .visual-input-number {
    position: relative;
    display: inline-block;
    height: 100%;
    line-height: 38px;
    .visual-input-number__decrease,
    .visual-input-number__increase {
      position: absolute;
      z-index: 1;
      top: 1px;
      text-align: center;
      background: #f5f7fa;
      color: #606266;
      cursor: pointer;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 40px;
    }
    .visual-input-number__decrease {
      left: 0px;
      border-radius: 4px 0 0 4px;
      border-right: 1px solid #dcdfe6;
      i {
        font-size: 16px;
        &::before {
          content: "—";
        }
      }
    }
    .visual-input-number__increase {
      right: 0px;
      border-radius: 0 4px 4px 0;
      border-left: 1px solid #dcdfe6;
      i {
        font-size: 18px;
        &::before {
          content: "+";
        }
      }
    }
    .visual-input {
      display: flex;
      align-items: center;
      position: relative;
      font-size: 14px;
      width: 100%;
      input {
        text-align: center;
        border: 0;
        background-color: #fff;
        border-radius: 4px;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        outline: 0;
        padding-left: 40px;
        padding-right: 40px;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        width: 100%;
      }
    }
  }
}
